<template>
	<jk-dialog
		v-model="showDialog"
		:title="`${dataId ? '编辑' : '新增'}-生产投料`"
		width="1100px"
		:show-content-loading="showLoading"
		:confirm-btn-loading="saveBtnLoading"
		append-to-body
		:fullscreen="true"
		:permission-prefix="permissionPrefix"
		@on-cancel="onVisibleChange(false)"
		@on-visible-change="onVisibleChange"
		@on-confirm="onConfirmBtn('save')"
	>
		<el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="110px" :show-message="false">
			<el-row ref="box1">
				<div>
					<div>
						<el-col :span="6">
							<el-form-item class="margin-bottom-10" label="单据编号">
								<span class="read-only-2">{{ ruleForm.code || '系统自动生成' }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="margin-bottom-10" label="投料序号">
								<span class="read-only-2">{{ ruleForm.sortNum || '系统自动生成(同班次依次递增)' }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="margin-bottom-10" label="投料日期" prop="feedstockDateTime">
								<jk-date-picker v-model="ruleForm.feedstockDateTime" value-format="yyyy-MM-dd HH:mm:ss" disabled type="datetime" size="medium" placeholder="投料时间" @change="onDateTimeChange" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="margin-bottom-10" label="投料班次" prop="shiftId">
								<el-select v-model="ruleForm.shiftName" disabled clearable placeholder="报工班次" class="width-100-percent" @change="onScheduleShiftChange">
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="margin-bottom-10" label="投料人" prop="datalist">
								<el-select v-model="ruleForm.datalist" placeholder="请选择" multiple class="width-100-percent" @change="onStaffListChange">
									<el-option v-for="item in staffList" :key="item.empId" :label="item.empName" :value="item.empId" />
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="margin-bottom-10" label="清花线" prop="productionLineId">
								<jk-select v-model="ruleForm.productionLineId" :disabled="dataId ? true : false" size="medium" class="width-100-percent" :option-list="productionLineList" value-key-name="id" label-key-name="name" placeholder="产线" @change="onPrdLineChange"></jk-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="margin-bottom-10" label="品种">
								<span class="read-only-2">{{ ruleForm.productName }}</span>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item class="margin-bottom-10" label="批号">
								<span class="read-only-2">{{ ruleForm.batchCode }}</span>
							</el-form-item>
						</el-col>
					</div>
				</div>
			</el-row>
			<div class="flex-start box" :style="{height: `${dialogTableHeight + 70}px`}">
				<div class="tabLeft">
					<div style="display: flex; justify-content: space-between;">
						<el-tag type="primary" effect="plain" class="margin-bottom-10">
							<span class="el-icon-tickets item-gap"></span>
							<span>原棉投料</span>
						</el-tag>
						<!--						<el-button type="primary" size="mini" @click="addDataConfig">新增</el-button>-->
					</div>
					<jk-table
						ref="jkTable"
						:edit-rules="validRules"
						:data="ruleForm.productList"
						show-footer
						:footer-method="footerMethod"
						border
						:height="dialogTableHeight"
					>
						<vxe-column title="操作" align="center" field="operation" :width="70" fixed="left">
							<template slot="header">
								<el-button size="mini" type="text" @click="selectProductDialogState">添加</el-button>
							</template>
							<template slot-scope="scope">
								<div class="flex-center">
									<el-button type="text" size="mini" icon="el-icon-delete" @click="onRemoveBtn(scope)"></el-button>
								</div>
							</template>
						</vxe-column>
						<!--						<vxe-table-column field="valMax" title="原料批号" align="center" min-width="130" prop="billDate">-->
						<!--							<template slot-scope="scope">-->
						<!--								<div class="flex-center">-->
						<!--									<el-select v-model="scope.row.batchCode" size="mini" placeholder="请选择" class="width-100-percent">-->
						<!--										<el-option v-for="item in rawMaterialList" :key="item.id" :label="item.batchCode" :value="item.batchCode" />-->
						<!--									</el-select>-->
						<!--								</div>-->
						<!--							</template>-->
						<!--						</vxe-table-column>-->
						<vxe-column title="原料批号" align="left" field="workshopBatchCode" :min-width="130">
							<template slot-scope="scope">
								<remote-search-product-input
									:is-valid-date="true"
									placeholder="原料批号"
									only-key="id"
									query-name="batchCode"
									size="mini"
									:form-data="scope.row"
									@on-select="onSelectBatchChange($event, scope.rowIndex)"
								></remote-search-product-input>
							</template>
						</vxe-column>
						<vxe-table-column field="alterValue" title="件数" align="center" min-width="100">
							<template slot-scope="scope">
								<div class="flex-center">
									<jk-number-input v-model="scope.row.productNum" size="mini" @input="cottonCalculateAmount(scope.row.productNum, scope.rowIndex)"></jk-number-input>
								</div>
							</template>
						</vxe-table-column>
						<vxe-table-column field="productQty" title="单件重(公斤)" align="center" min-width="100">
							<template slot-scope="scope">
								<div class="flex-center">
									<jk-number-input v-model="scope.row.productQty" size="mini" @input="cottonCalculateWeight(scope.row.productQty, scope.rowIndex)"></jk-number-input>
								</div>
							</template>
						</vxe-table-column>
						<vxe-table-column field="allQty" title="合计重量(公斤)" align="center" min-width="120">
							<template slot-scope="scope">
								<div class="flex-center">
									<jk-number-input v-model="scope.row.allQty" size="mini" @change="updateFooterEvent"></jk-number-input>
								</div>
							</template>
						</vxe-table-column>
					</jk-table>
				</div>
				<div class="tabRight">
					<div style="display: flex; justify-content: space-between;">
						<el-tag type="primary" effect="plain" class="margin-bottom-10">
							<span class="el-icon-tickets item-gap"></span>
							<span>回花投料</span>
						</el-tag>
						<el-button type="primary" size="mini" @click="addDataConfig">新增</el-button>
					</div>
					<jk-table
						ref="jkTableHH"
						:data="ruleForm.productListHH"
						show-footer
						:footer-method="footerMethodHH"
						border
						:height="dialogTableHeight"
					>
						<vxe-column title="操作" align="center" field="operation" :width="70" fixed="left">
							<template slot="header">
								<el-button size="mini" type="text" @click="selectProductDialogStateHh">添加</el-button>
							</template>
							<template slot-scope="scope">
								<div class="flex-center">
									<el-button :disabled="!!scope.row.ppfCottonBlendingId" type="text" size="mini" icon="el-icon-delete" @click="onRemoveBtnHh(scope)"></el-button>
								</div>
							</template>
						</vxe-column>
						<vxe-table-column field="valMax" title="回花品种" align="center" min-width="130">
							<template slot-scope="scope">
								<div class="flex-center">
									<el-select v-model="scope.row.productId" size="mini" placeholder="请选择" class="width-100-percent">
										<el-option v-for="item in lapWasteVarietyList" :key="item.id" :label="item.name" :value="item.id" />
									</el-select>
								</div>
							</template>
						</vxe-table-column>
						<vxe-table-column field="productNum" title="件数" align="center" min-width="100">
							<template slot-scope="scope">
								<div class="flex-center">
									<jk-number-input v-model="scope.row.productNum" size="mini" @input="recycleCalculateAmount(scope.row.productNum, scope.rowIndex)"></jk-number-input>
								</div>
							</template>
						</vxe-table-column>
						<vxe-table-column field="productQty" title="单件重(公斤)" align="center" min-width="100">
							<template slot-scope="scope">
								<div class="flex-center">
									<jk-number-input v-model="scope.row.productQty" size="mini" @input="recycleCalculateWeight(scope.row.productQty, scope.rowIndex)"></jk-number-input>
								</div>
							</template>
						</vxe-table-column>
						<vxe-table-column field="allQty" title="合计重量(公斤)" align="center" min-width="120">
							<template slot-scope="scope">
								<div class="flex-center">
									<jk-number-input v-model="scope.row.allQty" size="mini" @change="updateFooterEventHH"></jk-number-input>
								</div>
							</template>
						</vxe-table-column>
					</jk-table>
				</div>
			</div>
			<div style="display: flex; align-items: center; justify-content: center">
				<el-tag>原棉回花合计：{{ printedNumbers + printedHHNumbers }}（公斤）</el-tag>
			</div>
			<create-dialog
				:dialog-state="createDialogState"
				@on-visible-change="onVisibleChangeOfCreateDialog"
				@on-finish="onFinishOfCreateDialog"
			></create-dialog>
		</el-form>
	</jk-dialog>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import {
        productionFeedstockCreate,
        productionFeedstockUpdate,
        productionFeedstockGet, workforceManagementScheduleEmpGetByPost, systemEmpPage
    } from '../../../../api/production/feedMaterial';
    import { formatDate, formatTime, tipsBar } from '../../../../utils/jk/jk-tool';
    import { workforcemanagementScheduleList } from '../../../../api/schedule/scheduling';
    import checkboxEmpDialog from '../../../personnel/group/checkbox-emp-dialog';
    import remoteSearchBatchCodeInput from '../productConfigCotton/components/remote-search-batch-code-input';
    import checkboxProductDialog from '../../order/components/checkbox-product-dialog';
    import { workforceManagementShiftGetByTime } from '@/api/schedule/shift';
    import { productionPrdMachineView } from '@/api/production/xsOpen';
    import { spinMaterialPage } from '@/api/material/rawMaterial';
    import { spinWorkshopProductBatchPage } from '@/api/material/workshopProductBatch';
    import createDialog from '@/views/basicData/dataConfig/save-dialog';
    import { systemDataConfigPage } from '../../../../api/basicData/dataConfig';
    import remoteSearchProductInput from './components/remote-search-product-input/index.vue';
    import XEUtils from 'xe-utils';
    export default {
        components: {
            checkboxProductDialog,
            remoteSearchBatchCodeInput,
            remoteSearchProductInput,
            checkboxEmpDialog,
            createDialog
        },
        name: '',
        props: {
            // 页面权限的前缀
            permissionPrefix: {
                type: String,
                default: ''
            },
            dialogState: {
                type: Boolean,
                default: false
            },
            dataId: {
                type: [String, Number],
                default: ''
            }
        },
        mixins: [calHeight],
        data() {
            return {
                alterValue: 0,
                alterHHValue: 0,
                roleIds: [],
                staffArray: [],
                scheduleShiftList: [],
                createDialogState: false,
                workshopList: [],
                checkboxEmpDialogState: false,
                productionLineList: [],
                showDialog: false,
                showLoading: true,
                saveBtnLoading: false,
                staffList: [],
                lapWasteVarietyList: [],
                validRules: {
                    valMax: [
                        { required: true, message: '名称必须填写' }
                    ]
                },
                ruleForm: {
                    'feedstockDateTime': '',
                    'batchCode': '',
                    'batchId': null,
                    'billDate': '',
                    'code': '',
                    'empList': [],
                    'datalist': [],
                    'ppfCottonBlendingCode': '',
                    'ppfCottonBlendingId': null,
                    'prdNoticeCode': '',
                    'prdNoticeId': null,
                    'productCode': '',
                    'productId': null,
                    'productListHH': [
                        { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }
                    ],
                    'productList': [
                        { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }, { productNum: 0, productQty: 0, allQty: 0 }
                    ],
                    'productModels': '',
                    'productName': '',
                    'productionLineCode': '',
                    'productionLineId': null,
                    'productionLineName': '',
                    'remark': '',
                    'shiftId': null,
                    'shiftCode': '',
                    'shiftName': '',
                    'totalQty': null,
                    'totalWeight': null,
                    'unitCode': '',
                    'unitId': null,
                    'unitName': '',
                    'workshopCode': '',
                    'workshopId': null,
                    'workshopName': ''
                },
                rules: {
                    empList: [{ required: true, trigger: 'change' }],
                    ppfCottonBlendingId: [{ required: true, trigger: 'change' }],
                    feedstockDateTime: [{ required: true, trigger: 'change' }],
                    productionLineId: [{ required: true, trigger: 'change' }],
                    shiftId: [{ required: true, trigger: 'change' }],
                    billDate: [{ required: true, trigger: 'change' }],
                    totalWeight: [{ required: true, trigger: 'change' }],
                    workshopId: [{ required: true, trigger: 'change' }],
                    productId: [{ required: true, trigger: 'change' }],
                    batchId: [{ required: true, trigger: 'change' }],
                    datalist: [{ required: true, trigger: 'change' }]
                },
                updatedEmpList: [],
                rawMaterialList: [],
                printedNumbers: [],
                printedHHNumbers: []
            };
        },
        methods: {
            addDataConfig() {
                this.createDialogState = true;
            },
            // 打开组件
            onVisibleChangeOfCreateDialog(e) {
                this.createDialogState = e;
            },
            // 点击确定
            onFinishOfCreateDialog(id) {
                this.getHHDataConfigPage();
                this.getYMDataConfigPage();
                this.createDialogState = false;
            },
            getHHDataConfigPage() {
                this.tableLoading = true;
                const params = {
                    pageNo: 1,
                    pageSize: 100,
                    code: 'HH_TOULIAO'
                };
                return systemDataConfigPage(params).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.ruleForm.productListHH.forEach(x => {
                            if (x.productQty === 0) {
                                x.productQty = res.data.res.length > 0 ? parseInt(res.data.res[0].value) : 0;
                                this.hh_default = res.data.res.length > 0 ? parseInt(res.data.res[0].value) : 0;
                                this.$nextTick(() => {
                                    this.onDefaultHHBtn();
                                });
                            }
                        });
                    } else {
                        this.ruleForm.productList.forEach(x => {
                            if (x.productQty === 0) {
                                x.productQty = res.data.res.length > 0 ? parseInt(res.data.res[0].value) : 0;
                            }
                        });
                    }
                });
            },
            getYMDataConfigPage() {
                this.tableLoading = true;
                const params = {
                    pageNo: 1,
                    pageSize: 100,
                    code: 'YM_TOULIAO'
                };
                return systemDataConfigPage(params).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.ruleForm.productList.forEach(x => {
                            if (x.productQty === 0) {
                                x.productQty = res.data.res.length > 0 ? parseInt(res.data.res[0].value) : 0;
                                this.ym_default = res.data.res.length > 0 ? parseInt(res.data.res[0].value) : 0;
                                this.$nextTick(() => {
                                    this.onDefaultBtn();
                                });
                            }
                        });
                    } else {
                        this.ruleForm.productList.forEach(x => {
                            if (x.productQty === 0) {
                                x.productQty = res.data.res.length > 0 ? parseInt(res.data.res[0].value) : 0;
                            }
                        });
                    }
                });
            },
            getRawMaterial() {
                this.tableLoading = true;
                return spinWorkshopProductBatchPage(this.searchParams).then(res => {
                    this.tableLoading = false;
                    if (res.data.status === 200) {
                        this.rawMaterialList = res.data.res || [];
                    }
                });
            },
            onDefaultBtn() {
                this.ruleForm.productList.forEach(x => {
                    x.productNum = null;
                    x.productNum = this.alterValue;
                    x.productQty = null;
                    x.productQty = this.ym_default;
                });
            },
            onDefaultHHBtn() {
                this.ruleForm.productListHH.forEach(x => {
                    x.productNum = null;
                    x.productNum = this.alterHHValue;
                    x.productQty = null;
                    x.productQty = this.hh_default;
                });
            },
            updateFooterEventHH() {
                this.$nextTick(() => {
                    const $table = this.$refs.jkTableHH.$refs.xTable;
                    $table.updateFooter();
                });
            },
            updateFooterEvent() {
                const $table = this.$refs.jkTable.$refs.xTable;
                $table.updateFooter();
            },
            footerMethod({ columns, data }) {
                const keys = ['productNum', 'productQty', 'allQty'];
                return [
                    columns.map((column, columnIndex) => {
                        if (columnIndex === 0) {
                            return '合计';
                        }
                        if (keys.includes(column.field)) {
                            this.printedNumbers = XEUtils.sum(data, column.field);
                            return XEUtils.sum(data, column.field);
                        }
                        return null;
                    })
                ];
            },
            sumNum(list, field) {
                let count = 0;
                list.forEach(item => {
                    count += Number(item[field]);
                });
                return count;
            },
            footerMethodHH({ columns, data }) {
                const keys = ['productNum', 'productQty', 'allQty'];
                return [
                    columns.map((column, columnIndex) => {
                        if (columnIndex === 0) {
                            return '合计';
                        }
                        if (keys.includes(column.field)) {
                            this.printedHHNumbers = XEUtils.sum(data, column.field);
                            return XEUtils.sum(data, column.field);
                        }
                        return null;
                    })
                ];
            },
            cottonCalculateAmount(event, index) {
                this.$set(this.ruleForm.productList[index], 'allQty', event * (this.ruleForm.productList[index].productQty ? this.ruleForm.productList[index].productQty : 0));
                this.updateFooterEvent();
            },
            cottonCalculateWeight(event, index) {
                this.$set(this.ruleForm.productList[index], 'allQty', (this.ruleForm.productList[index].productNum ? this.ruleForm.productList[index].productNum : 0) * event);
                this.updateFooterEvent();
            },
            recycleCalculateAmount(event, index) {
                this.$set(this.ruleForm.productListHH[index], 'allQty', event * (this.ruleForm.productListHH[index].productQty ? this.ruleForm.productListHH[index].productQty : 0));
                this.updateFooterEventHH();
            },
            recycleCalculateWeight(event, index) {
                this.$set(this.ruleForm.productListHH[index], 'allQty', (this.ruleForm.productListHH[index].productNum ? this.ruleForm.productListHH[index].productNum : 0) * event);
                this.updateFooterEventHH();
            },
            selectProductDialogState() {
                this.onDefaultBtn();
                this.ruleForm.productList.push({ productNum: this.alterValue, allQty: 0, productQty: this.ym_default });
            },
            selectProductDialogStateHh() {
                this.onDefaultHHBtn();
                this.ruleForm.productListHH.push({ productNum: this.alterHHValue, productQty: this.hh_default, allQty: 0 });
            },
            onStaffListChange(e) {
                this.updatedEmpList = [];
                e.forEach(id => {
                    const selectedItem = this.staffList.find(option => option.empId === id);
                    if (selectedItem) {
                        // 根据需要构造对象，这里直接包含了id, name, code
                        this.updatedEmpList.push({
                            id: selectedItem.empId,
                            name: selectedItem.empName,
                            code: selectedItem.empCode
                        });
                    }
                });
                this.ruleForm.empList = this.updatedEmpList;
            },
            // 当前班次信息
            getScheduleShift() {
                const params = {
                    workshopId: this.ruleForm.workshopId,
                    belongTime: formatTime(Date.now())
                };
                return workforceManagementShiftGetByTime(params).then(res => {
                    if (res.data.status === 200) {
                        this.$set(this.ruleForm, 'shiftName', res.data.res.currentShiftInfo.name);
                        this.$set(this.ruleForm, 'shiftId', res.data.res.currentShiftInfo.id);
                        this.$set(this.ruleForm, 'shiftCode', res.data.res.currentShiftInfo.code);
                    }
                });
            },
            onSelectBatchChange(e, index) {
                if (Object.keys(e).length) {
                    // this.$set(this.ruleForm.productList[index], 'batchId', e.id);
                    this.$set(this.ruleForm.productList[index], 'batchCode', e.batchCode);
                }
            },
            onSelectProductChange(e) {
                if (Object.keys(e).length) {
                    this.$set(this.ruleForm, 'batchId', null);
                    this.$set(this.ruleForm, 'batchCode', '');
                    this.$set(this.ruleForm, 'productId', e.id);
                    this.$set(this.ruleForm, 'productCode', e.code);
                    this.$set(this.ruleForm, 'productName', e.name);
                    this.$set(this.ruleForm, 'productModels', e.models);
                }
            },
            onScheduleShiftChange(e) {
                let item = {};
                if (e) {
                    item = this.scheduleShiftList.find(x => x.id === e);
                } else {
                    item = {
                        id: null,
                        shiftId: null,
                        shiftName: null,
                        scheduleId: null
                    };
                }
                this.$set(this.ruleForm, 'scheduleId', item.scheduleId);
                this.$set(this.ruleForm, 'shiftId', item.id);
                this.$set(this.ruleForm, 'shiftId', item.shiftId);
                this.$set(this.ruleForm, 'shiftName', item.shiftName);
            },
            onDateTimeChange(e) {
                this.$set(this.ruleForm, 'shiftId', null);
                this.$set(this.ruleForm, 'shiftName', null);
                this.$set(this.ruleForm, 'shiftId', null);
                this.$set(this.ruleForm, 'billDate', formatDate(e));
                this.scheduleShiftList = [];
                this.getDateScheduleShiftOptionRequest();
            },
            getDateScheduleShiftOptionRequest() {
                if (this.ruleForm.workshopId && this.ruleForm.billDate) {
                    return workforcemanagementScheduleList({
                        belongDate: [this.ruleForm.billDate, this.ruleForm.billDate],
                        workshopId: this.ruleForm.workshopId
                    }).then(res => {
                        if (res.data.status === 200) {
                            const resData = res.data.res;
                            if (resData && resData.length) {
                                this.scheduleShiftList = resData[0].scheduleShiftList;
                            } else {
                                // tipsBar(this, 'custom', 'warning', '当前时间未排班，请排班后再操作！');
                            }
                        }
                    });
                }
            },
            onPrdLineChange(e) {
                const item = this.productionLineList.find(x => x.id === e);
                this.$set(this.ruleForm, 'productionLineId', item.id);
                this.$set(this.ruleForm, 'productionLineCode', item.code);
                this.$set(this.ruleForm, 'productionLineName', item.name);
                this.$set(this.ruleForm, 'productName', item.productName);
                this.$set(this.ruleForm, 'productId', item.productId);
                this.$set(this.ruleForm, 'productCode', item.productCode);
                this.$set(this.ruleForm, 'batchCode', item.batchCode ? item.batchCode : '无');
            },
            onRemoveBtn(scope) {
                if (this.ruleForm.productList.length > 1) {
                    this.ruleForm.productList.splice(scope.rowIndex, 1);
                }
            },
            onRemoveBtnHh(scope) {
                if (this.ruleForm.productListHH.length > 1) {
                    this.ruleForm.productListHH.splice(scope.rowIndex, 1);
                }
            },
            getParamData() {
                this.$set(this.ruleForm, 'billDate', formatDate(this.ruleForm.feedstockDateTime));
                const params = JSON.parse(JSON.stringify(this.ruleForm));
                return params;
            },

            createAndUpdateRequest() {
                this.saveBtnLoading = true;
                // 新增
                if (!this.dataId) {
                    this.ruleForm.id = null;
                    productionFeedstockCreate(this.getParamData()).then(res => {
                        this.saveBtnLoading = false;
                        if (res.data.status === 200) {
                            this.$tipsBar(this, 'save');
                            this.$emit('on-finish');
                        }
                    });
                    return;
                }

                // 编辑
                productionFeedstockUpdate(this.getParamData()).then(res => {
                    this.saveBtnLoading = false;
                    if (res.data.status === 200) {
                        this.$tipsBar(this, 'save');
                        this.$emit('on-finish');
                    }
                });
            },
            onConfirmBtn() {
                this.$refs['ruleForm'].validate(valid => {
                    const tempListHH = this.ruleForm.productListHH.filter(x =>
                        x.productId ||
                        x.productNum
                    );
                    const tempList = this.ruleForm.productList.filter(x =>
                        x.batchCode ||
                        x.productNum
                    );
                    this.ruleForm.productListHH = tempListHH;
                    this.ruleForm.productList = tempList;
                    const batchCode = this.ruleForm.productList.every(x => x.batchCode);
                    if (valid && batchCode) {
                        this.createAndUpdateRequest();
                    } else {
                        this.$tipsBar(this, 'validator');
                    }
                });
            },
            onVisibleChange(e) {
                this.$emit('on-visible-change', e);
                if (!e) {
                    Object.assign(this.$data, this.$options.data());
                    this.$nextTick(() => {
                        this.$refs.ruleForm.resetFields();
                    });
                }
            },
            getDetailRequest() {
                return productionFeedstockGet({ id: this.dataId }).then(res => {
                    if (res.data.status === 200) {
                        const resData = res.data.res || {};
                        if (resData.empList) {
                            if (!resData.datalist) {
                                resData.datalist = [];
                            }
                            resData.empList.forEach(x => {
                                resData.datalist.push(x.id);
                            });
                        }
                        this.ruleForm = resData;
                    }
                });
            },
            getProductionLineListRequest() {
                const params = {
                    workshopId: this.ruleForm.workshopId,
                    processCodes: ['QH']
                };
                return productionPrdMachineView(params).then(res => {
                    if (res.data.status === 200) {
                        this.productionLineList = res.data.res;
                    }
                });
            },
            getWorkforceManagementScheduleEmplist() {
                const params = {
                    workshopId: this.ruleForm.workshopId,
                    shiftId: this.ruleForm.shiftId,
                    belongDate: formatDate(Date.now()),
                    postId: '96'
                };
                return workforceManagementScheduleEmpGetByPost(params).then(res => {
                    if (res.data.status === 200) {
                        this.staffList = res.data.res || [];
                    }
                });
            },
            getAssembleList() {
                this.staffList = [];
                const params = {
                    pageNo: 1,
                    pageSize: 100,
                    onJob: true,
                    postId: '96'
                };
                return systemEmpPage(params).then(res => {
                    if (res.data.status === 200) {
                        res.data.res ? res.data.res.forEach(x => {
                            x.empId = x.id;
                            x.empName = x.name;
                            delete x.id;
                            delete x.name;
                        }) : [];
                        this.staffList = res.data.res;
                    }
                });
            },
            getLapWasteVariety() {
                const params = {
                    pageNo: 1,
                    pageSize: 100,
                    typeCode: 'HH'
                };
                return spinMaterialPage(params).then(res => {
                    if (res.data.status === 200) {
                        this.lapWasteVarietyList = res.data.res;
                    }
                });
            },
            async getDependentData() {
                this.showLoading = true;
                this.workshopList = this.$store.state.user.userWorkshop.workshopList;
                this.workshopList = this.$store.state.user.userWorkshop.workshopList.find(x => x.code === 'QF');
                this.$set(this.ruleForm, 'workshopId', this.workshopList.id);
                this.$set(this.ruleForm, 'workshopCode', this.workshopList.code);
                this.$set(this.ruleForm, 'workshopName', this.workshopList.name);
                this.$set(this.ruleForm, 'billDate', formatDate(Date.now()));
                this.$set(this.ruleForm, 'feedstockDateTime', formatTime(Date.now()));
                await this.getLapWasteVariety();
                await this.getScheduleShift();
                await this.getRawMaterial();
                await this.getProductionLineListRequest();
                if (this.dataId) await this.getDetailRequest();
                if (this.dataId) await this.getAssembleList();
                await this.getDateScheduleShiftOptionRequest();
                if (!this.dataId) await this.getWorkforceManagementScheduleEmplist();
                if (!this.dataId) await this.getHHDataConfigPage();
                if (!this.dataId) await this.getYMDataConfigPage();
                this.showLoading = false;
            }
        },
        watch: {
            dialogState(newVal) {
                this.showDialog = newVal;
                if (newVal) {
                    this.getDependentData();
                }
            }
        }
    };
</script>
<style scoped>
.box {
  display: flex;
  align-items: center;
  justify-content: center;
}

.tabLeft {
  width: 100%;
  margin-right: 10px;
}
.tabRight{
  width: 100%;
}
</style>
